<template>

  <div class="userList">
    <p class="title">全部账号</p>
    <el-button type="primary" @click="roleAlert = true">创建子账号</el-button>
    <el-button type="danger" @click="deleteSelectUser">删除子账号</el-button>

    <table class="user-table">
      <thead>
      <tr>
        <th><input type="checkbox" @change="checkAll"></th>
        <th>子账号</th>
        <th>管理员账号</th>
        <th>子账号密码</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(u,index) in userList" :key="u.sub_account"
          :class="'row-light'+index%2+' '+(u.sub_account===undefined?'cant-select':'')">
        <td><input type="checkbox" v-if="u.sub_account!==undefined" :checked="u.isChecked"></td>
        <td>{{ u.sub_account }}</td>
        <td>{{ u.admin_account }}</td>
        <td>{{ u.password }}</td>
        <td>
          <a class="btn-col-edt" v-if="u.sub_account!==undefined" @click="updateAccount(u.sub_account,u.admin_account,u.password)">编辑</a>
          <a class="btn-col-rmv" v-if="u.sub_account!==undefined" @click="deleteUser(u.sub_account)">删除</a>
        </td>
      </tr>
      </tbody>
    </table>

    <div class="el-page">
      <el-pagination
          v-model="pageHelper"
          @click="testpage"
          @next-click="nxtPage"
          @prev-click="prvPage"
          :layout="pageLayout"
          :page-count="pageHelper.totalPage"
          :pager-count="5"
          :default-current-page="1"
          :page-size="10"
          :background="true"
          :total="1000"/>
    </div>
  </div>
  <el-dialog v-model="roleAlert"  style="background-color: rgb(13, 41, 67)" width="500px" >
    <template #header="{  titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">账号编辑</h4>
      </div>
    </template>
    <RoleAlert v-if="roleAlert" :user-info="{}" @change="change"></RoleAlert>
  </el-dialog>

</template>

<script>
import { ElMessageBox} from "element-plus";
import RoleAlert from "@/components/include/RoleAlert.vue";

export default {
  name: "AllAccount",
  components: {RoleAlert},
  data() {
    return {
      pageLayout: "prev,pager,next",
      roleAlert:false,
      userList: [
        {sub_account: 15772719061, admin_account: 15772719061, password: "12345678", isChecked: false},
        {sub_account: 15772719061, admin_account: 15772719061, password: "12345678", isChecked: false},
        {sub_account: 15772719061, admin_account: 15772719061, password: "12345678", isChecked: false},
        {sub_account: 15772719061, admin_account: 15772719061, password: "12345678", isChecked: false},
        {sub_account: 15772719061, admin_account: 16684828250, password: "12345678", isChecked: false},
        {sub_account: 15772719061, admin_account: 15772719061, password: "12345678", isChecked: false},
        {sub_account: 15772719061, admin_account: 15772719061, password: "12345678", isChecked: false},
        {sub_account: 15772719061, admin_account: 15772719061, password: "12345678", isChecked: false},
      ],
      pageHelper: {
        totalPage: 12,
        currentPage: 1,
      },
      //显示的页数(固定5个)
      showPages: []
    }
  },
  methods: {
    updateAccount(sub_account,admin_account,password){
      this.roleAlert = true;
      this.userList.sub_account=sub_account;
      this.userList.admin_account=admin_account;
      this.userList.password=password;
    },
    change(obj){
      this.roleAlert=obj
    },
    //测试页数
    testpage() {
      console.info('c:' + this.pageHelper.currentPage)
    },

    //删除用户
    deleteUser(sub_account) {
      ElMessageBox.confirm(
          '确定要删除子账号为' + sub_account + "的用户吗？",
          '警告',
      ).then(() => {
//发送请求删除用户
      })

    },

    //选中所有
    checkAll() {
      this.userList.forEach(u => {
        u.isChecked = !u.isChecked;
      })
    },

    //上一页
    prvPage() {
      if (this.pageHelper.currentPage > 1) {
        this.pageHelper.currentPage--;
      }
    },

    // 下一页
    nxtPage() {
      if (this.pageHelper.currentPage < this.pageHelper.totalPage) {
        this.pageHelper.currentPage++;
      }
    },

    //添加用户
    addUser() {

    },

    //删除选中用户
    deleteSelectUser() {

    },
  },
  created() {

    //使表格显示10行
    let length = this.userList.length;
    for (let i = 0; i < 10 - length; i++) {
      this.userList.push({id: undefined, account: undefined, name: "　", isChecked: false});
    }
  }
}
</script>

<style scoped>
thead > tr > th:first-child {
  text-align: center;
  border-radius: 10px 0 0 0;
}
.my-header h4{
  color: white;
}
thead > tr > th:last-child {
  text-align: left;
  border-radius: 0 10px 0 0;
}

/*组件高度(根据实际显示器调整)和样式*/
.userList {
  line-height: 60px;
 padding: 10px;

}

.userList .title{
  font-weight: bold;

  font-size: 1.17em;
}

/*白色文字*/
button[class^='btn'], thead {
  color: white;
}

/*单选框样式*/
.user-table input[type='checkbox'] {

  width: 15px;
  height: 15px;

}



/*按钮样式*/
button[class^='btn'] {
  border: none;
  padding: 5px;
  border-radius: 5px;
  margin: 10px 10px 10px 0;
}


/*用户表格*/
.user-table {
  width: 100%;
  text-align: center;
}

/*表格头圆角*/
.user-table thead {
}

/*表格体圆角*/
.user-table thead {
  border-radius: 15px;
}

/*表格行高*/
.user-table {
  border-spacing: 0;
  line-height: 56px;
}

/*表头*/
th {
  height: 50px;
  background-color: rgb(45, 109, 167);
  color: white;
}

/*行删除按钮*/
.btn-col-edt {
  color: steelblue;
}

/*行编辑按钮*/
.btn-col-rmv {
  color: orangered;
}

a[class^='btn-col'] {
  margin: 0 10px;
  text-decoration: none;
}

/*暗行*/
tr[class~='row-light1'] {
  background-color: white;
}

/*使占位符不能被选中*/
tr[class~='cant-select'] {
  user-select: none;
}

/*分页盒子*/
.el-page {
  width: fit-content;
  margin: 10px auto;
}

/*单选框样式*/
.user-table input[type='checkbox'] {
  appearance: none;
  width: 15px;
  height: 15px;
  border: rgb(52, 99, 138) 1px solid;
  background-color: white;
}

.user-table input[type='checkbox']:before {
  line-height: 15px;
  color: white;
  content: "✔";
}

/*单选框选中*/
.user-table input[type='checkbox']:checked {
  background-color: rgb(52, 99, 138);
}
</style>